<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=0.5">
<title>文件中转站</title>
<meta name="author" content="7gugu (https://www.7gugu.com)" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit">
<script type="text/javascript" src="assets/js/qrcode.min.js"></script>
<script type="text/javascript" src="assets/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="assets/js/tools.js"></script>
<style type="text/css">
body{
font-family:"微软雅黑","Microsoft YaHei";
background-color:#000000;
}
.filter{
position:absolute;
top:0px;
left:0px;
bottom:0px;
 background:url(assets/img/background.jpg) no-repeat 0 0;  
 height:100%;
 width: 100%;
 overflow:hidden;
 background-size: 100% 115%;
 filter: blur(50px);
 z-index:-1;
}
.container{
z-index:0;
}
.option-bg{
width:390px;
height:540px;
margin-left:auto;
margin-right:auto;
background-color:#ffffff;
position:relative;
top:130px;
border-radius:5px;
box-shadow:2px 2px 40px 3px #1c1c1c;
}

h1{
color:#1c1c1c;
line-height:10px;
text-align:center;
}
p{
color:#a3a3a3;
text-align:center;
}
#show_stater{
text-align:center;
}
.icon-refresh{
border-radius: 50%;
width: 30px;
height: 30px;
border:2px solid currentColor;
border-top:2px solid transparent;
position: relative;
margin:30px auto;
}
.icon-refresh::after{
content: "";
width: 5px;
height: 5px;
border-bottom: 2px solid currentColor;
border-left: 2px solid currentcolor;
position: absolute;
top: 2px;
left: -1px;
transform: rotate(180deg);
}
#show_file{
position:relative;top:80px;
text-align:center;
}
table.gridtable {
	font-family: verdana,arial,sans-serif;
	font-size:11px;
	color:#333333;
	border-width: 1px;
	border-color: #666666;
	border-collapse: collapse;
}
table.gridtable th {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #666666;
	background-color: #dedede;
}
table.gridtable td {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #666666;
	background-color: #ffffff;
}
hr{
height:1px;
border:none;
border-top:1px solid #555555;
width:85%;
}
.suc_button {
    position: relative;
    background-color: #4CAF50;
    border: none;
    font-size: 28px;
    color: #FFFFFF;
    padding: 20px;
    width: 200px;
    text-align: center;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
}

.suc_button:after {
    content: "";
    background: #90EE90;
    display: block;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
    margin-left: -20px!important;
    margin-top: -120%;
    opacity: 0;
    transition: all 0.8s
}

.suc_button:active:after {
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s
}
.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.copyright{
color: #d3d3d3;
font-size: 12px;
position:relative;
top:250px;
text-align:center;
margin:auto;
}
    </style>
</head>
<body>
<div class="filter"></div>
<div style="color: #d3d3d3;font-size:20px;position:relative;left:30px;top:15px;opacity: 0.6;"><strong>文件中转站</strong></div>
    <div class="container">
        <div class="option-bg">
		<div id="show_starter" style="" >
		<div id="qrcode" style="width:150px; height:150px; position:relative;top:100px;left:120px;"></div>
		<div id='qrcode_word' style="position:relative;top:165px;">
		<h1>请使用手机扫码</h1>
		<p>强烈不推荐使用微信扫描</p>
		</div>
		</div>
		<div id='show_file' style="display:none;">
		<div style=""><h1>文件列表</h1></div>
		<br>
		<section id='file_list'>
		<div style="text-align:center">
		<table class="gridtable" style="margin:auto;" >
		<thead>
		<th>名称</th>
		<th>大小</th>
		<th>操作</th>
		</thead>
		<tbody id='file_list'>
		<tr><td>-</td><td>Loading...</td><td>-</td></tr>
		</tbody>
		</table>
		</section>
		<hr />
		<div id='dir_space' style="margin:auto;text-align:center;">可用空间查询中.</div>
		<hr>
		<h2 style="position:relative;line-height:1px;">上传文件</h2>
		<form enctype="multipart/form-data" id='file_upload'>
		<div style="border:2px solid #1c1c1c;margin:auto;width:85%">
		<input type="file" name="file" id="file" style="margin:auto;"> 
		</div>
		<br>
		<input type="button" class="suc_button" id='upload_button' value="上传文件" onclick=''/>
		</form>
		<hr>
		<p>如果断连了,请刷新页面,重新扫码</p>
		</div>
		</div>
		</div>
		<div></div>
		<div class="copyright">© 2014 - 2018 Power by 7gugu.</div>
		</div>
		
<script type="text/javascript">
//初始化二维码区域
var qrcode = new QRCode(document.getElementById("qrcode"), {
	width : 150,
	height : 150
});
if(!ismobile()){
makeCode();//创建二维码
}else{
var code_context=getCookie("code");
if(code_context!=null){
var template="加载中请稍后...";
$("div#qrcode").html(template);
$("div#qrcode_word").html("");
check_qrcode_connect(code_context,interval_id);
var interval_id=setInterval(function(){
check_qrcode_connect(code_context,interval_id);
},5000);//检测二维码是否被激活
}else{
makeCode();
}
}
</script>

</body>
</html>